<template>
  <div>
    <el-form inline>
      <el-form-item label="用户名">
        <el-input v-model="searchStr" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column label="序号">
        <template v-slot="{ $index }">
          <span>{{
            currentPage < 2 ? $index + 1 : $index + (currentPage - 1) * 5 + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="角色" prop="role"></el-table-column>
      <el-table-column label="禁用解禁">
        <template v-slot="{ row }">
          <el-tag
            :type="row.flag ? 'warning' : 'success'"
            effect="dark"
            style="cursor: pointer"
            @click="flag(row.id)"
          >
            {{ row.flag ? "禁用" : "解禁" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template v-slot="{ row }">
          <el-button @click="resetPwd(row.id)" type="success" size="mini"
            >重置密码</el-button
          >
          <el-button @click="delUser(row.id)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 10px"
      :current-page.sync="currentPage"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="data.length"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Users",
  data() {
    return {
      data: [],
      user: JSON.parse(localStorage.getItem("user")),
      searchStr: "",
      currentPage: 1,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    tableData() {
      let { currentPage, data } = this;
      return data.slice(5 * (currentPage - 1), 5 * currentPage);
    },
  },
  methods: {
    getList() {
      axios
        .get("/users/backend/search", {
          params: {
            id: this.user.id,
            searchStr: this.searchStr,
          },
        })
        .then(
          (res) => {
            this.data = res.list;
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
    flag(uid) {
      axios
        .post("/users/backend/flag", {
          id: this.user.id,
          uid,
        })
        .then(
          (res) => {
            this.$message.success(res.message);
            this.getList();
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
    resetPwd(uid) {
      axios
        .post("/users/backend/reset", {
          id: this.user.id,
          uid,
        })
        .then(
          (res) => {
            this.$message.success(res.message);
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
    delUser(uid) {
      axios
        .post("/users/backend/del", {
          id: this.user.id,
          uid,
        })
        .then(
          (res) => {
            this.$message.success(res.message);
            this.getList()
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
  },
};
</script>
<style scoped></style>
